<template>
      <div class="wode">
          <div class="top">
            <div><img src="" alt=""></div>
            <div><h3>12345678910</h3>
              <span>12345679889</span>
            </div>
            <div class="bun">账号设置</div>
          </div>
          <!-- 吃货卡 -->
          <div class="chi">
            <div class="ka">
              <p><span class="biaoti">吃货卡</span>| <span>吃货豆：</span><span class="num">1461</span></p>
              <p>升级超级吃货卡，每月的无门槛红包，下单返吃货豆</p>
              <div>></div>
            </div>
          </div>
          <!-- 红包和余额 -->
          <div class="redbox">
            <div class="hong">
              <div>
                <img src="../assets/redbox.png" alt=""><span>红包</span>
                <p>7张今日到期</p>
              </div>
            </div>
            <div class="yue">
              <div>
                <img src="../assets/yue.png" alt=""><span>红包</span>
                <p>0元</p>
              </div>
            </div>
          </div>
            <!-- 常用工具 -->
            <div class="gj">
              <div class="bt">常用工具</div>
              <div class="brr">
                <div>
                  <img src="../assets/yue.png" alt="">
                  <p>我的地址</p>
                </div>
                <div>
                  <img src="../assets/yue.png" alt="">
                  <p>我的客服</p>
                </div>
                <div>
                  <img src="../assets/yue.png" alt="">
                  <p>店铺关注</p>
                </div>
                <div>
                  <img src="../assets/yue.png" alt="">
                  <p>评价有礼</p>
                </div>
              </div>
            </div>

            <!-- 邀好友赚现金 -->
            <div class="di">
              <div class="left">
                <div>
                  <p>邀好友赚现金</p>
                  <span>最高的15元</span>
                </div>
                <div>
                  <img src="../assets/yue.png" alt="">
                </div>
                <div>
                  <div>去要请</div>
                  <div>看佣金</div>
                </div>
              </div>
              <div class="rigth">
                <div>
                  <p>饿了吗服务好</p>
                  <span>关注后及时接收系统通知</span>
                </div>
                <div>
                  <img src="../assets/yue.png" alt="">
                </div>
                <div>
                  <div>立即关注</div>
                </div>
              </div>
            </div>
        
  
      </div>
   
  </template>
  <script>
  export default {
  
  }
  </script>
  
  <style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .wode{
    background-color: #f5f5f5;
    padding: 10px;
  }
  .top{
    margin-top: 20px;
    display: flex;
    

  }
  .top>div:nth-child(1){
    background: red;
    width: 50px;
    border-radius: 100%;
    margin: 0 10px;
  }
  .top>div:nth-child(3){
    margin-left:50px ;
    border: 1px solid gray;
    border-radius: 10px;
    margin-top:10px ;
    font-size: 14px;
    color: black;
    text-align: center;
    line-height: 28px;
  }
  .top.img{
    width: 100%;
    
  }
  /* 吃货卡 */
  .chi{
    background-color:lightskyblue ;
    color: white;
    margin: 20px 0 10px 0;
    border-radius: 10px;
    padding: 5px;
    position: relative;
  }
  .chi>.ka>P>.biaoti{
    font-size: 25px;
    padding: 10px;
   
  }
  .chi>.ka>P>.num{
    font-size: 25px;
  }
  
  .chi>.ka>p:nth-child(1){
    margin: 10px 0 5px 0;
   }
  .chi>.ka>p:nth-child(2){ 
    font-size: 10px;
    color: lightcyan;
    padding: 10px;
  }
  .chi>.ka>div{
    font-size: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
   }
   /* 红包余额 */
   .redbox{
    margin: 20px 0;
    background-color: white;
    border-radius: 10px;
    padding: 15px 10px;
    display: flex;
    justify-content: space-around;
   }
   
   .redbox>.hong>div>span{
    font-size: 20px;
    font-weight: bold;
   }
   .redbox>.hong>div>img{
    width: 20px;
    height: 20px;
    margin-right:5px ;
   }
   .redbox>.yue>div>img{
    width: 20px;
    height: 20px;
    margin-right:5px ;
   }
   .redbox>.yue>div>span{
    font-size: 20px;
    font-weight: bold;
   }

   /* 常用工具 */
   .gj{
    background-color:white ;
    border-radius: 10px;
    padding: 10px;
   }
   .gj>.bt{
    font-size: 18px;
    font-weight: bold;
    margin:10px 0 10px 0 ;
   }
   .gj>.brr{
    display: flex;
    justify-content: space-around;
   }
   .gj>.brr>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }
   .gj>.brr>div>img{
    width: 25px;
    height: 25px;
    margin-bottom:5px ;
   }
   /* 邀好友赚现金 */
   .di{
    
    border-radius: 10px;
    margin-top:10px ;
    display: flex;
    justify-content: space-around;
   }
   .di>.left{
    background-color: white;
    border-radius: 10px;
    padding: 10px;
   }
   .di>.left>div>p{
    font-size: 20px;
    font-weight: bold;
   }
   .di>.left>div>span{
    font-size: 10px;
   }
   .di>.left>div:nth-child(2){
    background-color:#f5f5f5 ;
    height: 70px;
    border-radius: 10px;
    text-align: center;
   }
   .di>.left>div>img{
    margin-top:20px ;
   }
   .di>.left>div:nth-child(3){
    display: flex;
    justify-content: space-around;
   }
   .di>.left>div:nth-child(3)>div{
    border: 1px solid gray;
    border-radius: 10px;
    padding: 0 4px;
    margin-top:10px ;
   }
   .di>.rigth{
    background-color: white;
    border-radius: 10px;
    padding: 10px;
   }
   .di>.rigth>div>p{
    font-size: 20px;
    font-weight: bold;
   }
   .di>.rigth>div>span{
    font-size: 10px;
   }
   .di>.rigth>div:nth-child(2){
    background-color:#f5f5f5 ;
    height: 70px;
    border-radius: 10px;
    text-align: center;
   }
   .di>.rigth>div>img{
    margin-top:20px ;
   }
   .di>.rigth>div:nth-child(3){
    display: flex;
    justify-content: space-around;
   }
   .di>.rigth>div:nth-child(3)>div{
    border: 1px solid gray;
    border-radius: 10px;
    padding: 0 4px;
    margin-top:10px ;
   }
  </style>